<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			
			* {
				padding: 0;
				margin: 0;
			}

			li {
				width: 500px;
				height: 30px;
				border: 2px solid black;
				margin: 30px 0;
			}


		</style>
	</head>
	<body>
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		
	</body>
</html>
<script>
	
	// 通过标签名获取元素
	// 获取的是类数组
	var liArr = document.getElementsByTagName("li");
	console.log(liArr);

	var colorArry = ["red", "orange", "yellow", "green", "blue", "cyan", "purple"];
	var nameArr = ["小明", "小红", "小旭", "小月", "小新", "小丽", "小壮"];

	for (var i = 0; i < liArr.length; i++) {
		// 取出当前的li
		var li = liArr[i];

		// 修改行内样式
		li.style.backgroundColor = colorArry[i];

		// 修改内容
		li.innerHTML = nameArr[i];

	}

	// 类数组
	// 有length属性, 属性的key值为整型数字
	// var objArr = {
	// 	0: 5,
	// 	1: 7,
	// 	2: 8,
	// 	3: 9,
	// 	length: 4
	// };
	// console.log(objArr[0]);




</script>